<section class="body-container">
  <div class="detail-body">
    <div class="banner" *ngIf="!isLoading; else loadingTem;">
      <div class="references" *ngIf="flagReferences.length === 0" i18n="@@segment.details.segment-not-used">This segment is not used by any feature flag</div>
      <div class="references" nz-dropdown [nzDropdownMenu]="menu" *ngIf="flagReferences.length > 0">
        <a>
          <ng-container i18n="@@segment.details.this-segment">This segment is used by</ng-container>
          <span class="reference-count"> {{flagReferences.length}} </span>
          <ng-container i18n="@@segment.details.num-ff">feature flag(s)</ng-container>
          <i nz-icon nzType="down"></i>
        </a>
      </div>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li [nzDisabled]="flag.envId !== currentEnvId" nz-menu-item *ngFor="let flag of flagReferences" (click)="openFlagPage(flag)">
            {{ flag.name }}
            <span i18n="@@segment.details.in-other-environment" *ngIf="flag.envId !== currentEnvId">(in other environment)</span>
          </li>
        </ul>
      </nz-dropdown-menu>
      <button class="save-btn" nz-button nzType="primary" (click)="onReviewChanges()">
        <i nz-icon nzType="icons:icon-save"></i>
        <ng-container i18n="@@common.review-and-save">Review and save</ng-container>
      </button>
    </div>
    <div class="content-container">
      <div class="standard-div target-users" *ngIf="!isLoading; else loadingTem;">
        <div class="rule-banner">
          <div class="title-wraper">
            <div class="title" i18n="@@common.targeting-users">Targeting users</div>
            <i *ngIf="targetUsersActive" nz-icon (click)="targetUsersActive = !targetUsersActive" nzType="icons:icon-arrow-down"></i>
            <i *ngIf="!targetUsersActive" nz-icon (click)="targetUsersActive = !targetUsersActive" nzType="icons:icon-arrow-right"></i>
          </div>
        </div>
        <div *ngIf="targetUsersActive" style="margin-left: -12px;margin-top: 16px">
          <div class="content">
            <target-user
              i18n-type="@@common.including-users"
              type="Including users"
              [disableCreation]="segmentDetail.isShared"
              [userList]="userList"
              [selectedUserDetailList]="segmentDetail.includedUsers"
              (search)="onSearchUser($event)"
              (onSelectedUserListChange)="onSelectedUserListChange($event, true)">
            </target-user>
          </div>
          <div class="content">
            <target-user
              i18n-type="@@common.excluding-users"
              type="Excluding users"
              [disableCreation]="segmentDetail.isShared"
              [userList]="userList"
              [selectedUserDetailList]="segmentDetail.excludedUsers"
              (search)="onSearchUser($event)"
              (onSelectedUserListChange)="onSelectedUserListChange($event, false)">
            </target-user>
          </div>
        </div>
      </div>
      <div class="standard-div" *ngIf="!isLoading && !isUserPropsLoading; else loadingTem;">
        <div class="rule-banner">
          <div class="title" i18n="@@common.rules">Rules</div>
          <i nz-icon (click)="addRule()" nzType="icons:icon-add-outline"></i>
        </div>
        <div class="drop-list" cdkDropList (cdkDropListDropped)="onDrop($event)">
          <ng-container *ngFor="let rule of segmentDetail.rules; let index=index; trackBy: trackRuleById;">
            <div class="drop-box rule" cdkDrag>
              <find-rule
                [data]="rule"
                [userProps]="userProps"
                (addProperty)="onAddProperty($event)"
                (deleteRule)="deleteRule(index)"
                (onConditionChange)="onRuleConditionsChange($event, index)"
                (updateRuleName)="rule.name = $event">
              </find-rule>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <ng-template #loadingTem>
    <div class="block">
      <nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
    </div>
  </ng-template>
</section>
<change-review
  *ngIf="!isLoading"
  [visible]="reviewModalVisible"
  [refName]="segmentDetail.segment.name"
  [previous]="originalData"
  [current]="currentData"
  [refType]="refType"
  (onSave)="onSave($event)"
  (onCancel)="onCloseReviewModal()"
>
</change-review>


